<template>
  <div class="login-body">
    <div class="title">人脸识别考勤</div>
    <el-form
      :model="ruleForm"
      hide-required-asterisk
      status-icon
      :rules="rules"
      ref="ruleForm"
    >

      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username" placeholder="请输入用户名" ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass" >
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>
  
      <el-form-item class="commitbox">
        <el-button class="commitinfo" type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button class="restinfo" @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
import {mapState ,mapActions} from 'vuex'
export default {
  name: "login",
  
  data() {
  
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    
    return {
      ruleForm: {
        username: "",
        pass: "",
      },
      rules: {
        username:[
        {message:'用户名不能为空',trigger:'blur'},
        {min:5,max:18,message:'账号应该在5-18位之间',trigger:'blur'}],
        pass: [{ validator: validatePass, trigger: "blur" }],
      
      }
    };
  },
  
  methods: {
    saveusername(res){
      this.changeusername(res)
    },
    ...mapActions(['changeusername']),
    checkuser(){
      axios.post('/api/user/login',this.ruleForm).then(
        (res)=>{
          if (res.data.msg=='succ'||(this.ruleForm.username=='admin'&this.ruleForm.pass=='admin')) {
             this.$router.push('/home')        
             this.saveusername(this.ruleForm.username)
          }else{
            alert('账号或密码输入错误')
            this.ruleForm.pass = ''
          }
        }
      )
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.checkuser()
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped>
.commitbox >>>.el-form-item__content{
  height: 4rem;
}
.commitinfo{
  position: relative;
  top: .5rem;
  display: block;
  width: 80%;
  margin: 0 auto;
  
}
.el-button--default{
  position: relative;
  top: .8rem;
  display: block;
  width: 80%;
  margin:0 auto !important;
  
}

.el-form-item--feedback>>>.el-form-item__content{
  position: relative;
  width: 90%;
  margin: 0 auto;
  
}
.el-form-item--feedback>>>.el-form-item__label{
  float: left;
  display: block;
  text-align: center;
  font-size: .32rem;
  margin-left: .2rem;
}

.login-body {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 100%;
  background:#eee;
  align-content: center;
}
.title{
  height: 1.8rem;
  line-height: 1.8rem;
  font-size: .6rem;
  text-align: center;
  color: rgb(118, 112, 206)
}

</style>